<template>
    <div id="sql-editor">
        <textarea ref="textarea" />
    </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/lib/codemirror'
import 'codemirror/addon/lint/lint'
import 'codemirror/mode/sql/sql'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'

export default {
    name: 'SqlEditor',
    /* eslint-disable vue/require-prop-types */
    // props: ['sql', 'readOnly', 'completeSingle'],
    props: {
        value: {
            type: String,
            default: ''
        },
        readOnly: {
            type: Boolean,
            default: false
        },
        completeSingle: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            sqlEditor: null
        }
    },
    watch: {
        value(value) {
            const editorValue = this.sqlEditor.getValue()
            if (value !== editorValue) {
                this.sqlEditor.setValue(this.value)
            }
        }
    },
    mounted() {
        this.sqlEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
            mode: 'text/x-sql',
            matchBrackets: true,
            styleActiveLine: true,
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            spellcheck: true,
            lineWrapping: true,
            resetSelectionOnContextMenu: true,
            autofocus: true,
            indentUnit: 4,
            dragDrop: true,
            readOnly: this.readOnly,
            // theme:'rubyblue',
            extraKeys: {
                'Ctrl': 'autocomplete',
                Tab: function (cm) {
                    let spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
                    cm.replaceSelection(spaces);
                },
                // 'Alt-X': function (cm) {
                //     hintMeta(cm);
                // },
                // 'Alt-C': function (cm) {
                //     formatSql(cm);
                // },
                // 'Alt-Z': function (cm) {
                //     showTableSql(cm);
                // }
            },
            hintOptions: { completeSingle: this.completeSingle },
        })

        this.sqlEditor.setValue(this.value)
        // this.sqlEditor.on('change', () => {
        //     this.$emit('changed', this.getValue())
        //     this.$emit('input', this.getValue())
        // })
        // this.sqlEditor.on('keypress', () => {
        //     this.sqlEditor.showHint()
        // })
    },
    methods: {
        getValue() {
            return this.sqlEditor.getValue()
        }
    }
}
</script>

<style lang="scss" scoped>
#sql-editor {
    height: auto;
    position: relative;

    .CodeMirror {
        height: auto;
        // overflow-y: auto;
        min-height: 800px;
        font-family: Arial, monospace;
        font-size: 18px;
    }

    .CodeMirror-code {
        font-size: 16px;
    }
    //         .CodeMirror-scroll {
    //             min-height: 300px;
    //         }

    //         .cm-s-rubyblue span.cm-string {
    //             color: #F08047;
    //         }
    //     }
}
</style>
